<template>
	<div class="app">
		<h1>{{ heading }}</h1>
		<BoardComponent @bordclick="handleapp" 
		:result="result" 
		:play="nextPlayIsX"
		:winnerLine="winnerArr">
		</BoardComponent>
		
	</div>
</template>

<script>
	
import BoardComponent from "@/components/BoardComponent";
const lines = [
		[0,1,2],
		[3,4,5],
		[6,7,8],
		[0,3,6],
		[1,4,7],
		[2,5,8],
		[0,4,8],
		[2,4,6]
	]
export default {
  name: 'App',
	data(){
		return{
			result:[null,null,null,null,null,null,null,null,null],
			nextPlayIsX:true,
			winnerArr:[],
			heading: "Next player: x"
		}
	},
	components:{
		BoardComponent,
	},
	methods:{
		handleapp(index){
			if(this.result[index]){
				return
			}
			const res = this.result.slice()
			res[index] = this.nextPlayIsX?"X":"O"
			this.result = res
			this.nextPlayIsX = !this.nextPlayIsX
			this.heading = this.nextPlayIsX?"Next player:X":"Next player:O"
			
			
			
			for(let i = 0; i < lines.length; i++){
				const[a,b,c] = lines[i]
				if(this.result[c]){
					if(this.result[c] === this.result[b] && this.result[c] === this.result[a]){
						this.winnerArr = lines[i]
						this.heading = "winner is:"+this.result[c]
						return;
					}
				}
			}
		}
	}
}
</script>

<style>
@import '~normalize.css';
.app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #2c3e50;
}
</style>
